<template>
  <div class="tenement-extend-info">
    <div class="header-info">
      <h3 :class="{ 'ml200': editCheck }"> </h3>
      <div>
        <el-button v-show="!editCheck" @click="editCheck = true">修改</el-button>
        <el-button v-show="editCheck" @click="editCheck = false">取消</el-button>
        <el-button v-show="editCheck" type="primary" @click="submit">保存</el-button>
      </div>
    </div>
    <div v-if="!editCheck" class="content-info">
      <div class="detail-info">
        <el-row :gutter="30">
          <el-col :span="12">
            <div class="detail-row">
              <div>官方网站：</div>
              <label>{{ dataInfo.webSite }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>官方邮箱：</div>
              <label>{{ dataInfo.contactEmail }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>热线电话：</div>
              <label>{{ dataInfo.hotLine }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>联系地址：</div>
              <label>{{ dataInfo.contactAddress }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>企业公众号：</div>
              <label>{{ dataInfo.wxMp }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>企业微信：</div>
              <label>{{ dataInfo.wxCp }}</label>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="detail-row">
              <div>钉钉号：</div>
              <label>{{ dataInfo.dtCp }}</label>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
    <div v-else class="editForm" >
      <el-form :model="params" :rules="rules" label-position="right" label-width="6rem">
        <el-row :gutter="24">
          <el-col :span="22">
          <div class="basics-info">
            <el-row :gutter="30">
              <el-col :span="12">
                <el-form-item label="官方网站：" prop="code">
                  <el-input v-model="params.webSite" placeholder="官方网站" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="官方邮箱：" prop="contactEmail">
                  <el-input v-model="params.contactEmail" placeholder="请输入官方邮箱" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="热线电话：" prop="hotLine">
                  <el-input v-model="params.hotLine" placeholder="请输入热线电话" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="联系地址：" prop="contactAddress">
                  <el-input v-model="params.contactAddress" placeholder="请输入联系地址" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业公众号：" prop="wxMp">
                  <el-input v-model="params.wxMp" placeholder="请输入企业公众号" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="企业微信：" prop="wxCp">
                  <el-input v-model="params.wxCp" placeholder="请输入企业微信" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="钉钉号：">
                  <el-input v-model="params.dtCp" placeholder="请输入钉钉号" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-col>
       </el-row>
      </el-form>
    </div>
  </div>
</template>
<script>
import { getTenant, getTenantExtendSave } from '@/api/tenement'

export default {
  data() {
    return {
      disableds: true,
      dataInfo: {},
      rules: {},
      editCheck: false,
      params: {}
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    submit() {
      getTenantExtendSave(this.params).then(res => {
        this.$message.success('保存成功！')
        this.editCheck = false
        this.getInfo()
      })
    },
    getInfo() {
      getTenant({}).then(response => {
        //console.log('>>>>', JSON.stringify(response))
        if(response && response.extendInfo) {
          this.params = response.extendInfo
          this.dataInfo = response.extendInfo
        }else {
          this.params = {}
          this.dataInfo = {}
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .tenement-extend-info {
    .header-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      max-width: 60%;
      margin: 0 auto 30px;
      .ml200 {
       margin-left: 200px;
       align-items: center;
      }
    }

    .content-info {
      display: flex;
      max-width: 60%;
      margin: 0 auto;
      .logo-img {
        width: 100px;
        height: 100px;
        margin: 0 30px;
      }

      .detail-row {
        display: flex;
        font-size: 14px;
        color: #6d6d6d;
        line-height: 36px;
        // margin-bottom: 20px;

        >div {
          min-width: 5rem;
          text-align: right;
          margin-right: 10px;
        }

        >label {
          color: #b7b7b7;
          margin-left: 0.3rem;
        }
      }
    }
    .editForm {
      max-width:900px;
      margin: 0 auto;
    }
  }
</style>
